import { defineComponent, ref, computed, onMounted, watch, openBlock, createBlock, Transition, unref, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createCommentVNode, resolveDynamicComponent, renderSlot, createElementBlock, toDisplayString, Fragment, withModifiers, createVNode, vShow } from 'vue';
import { useTimeoutFn, useEventListener, useResizeObserver } from '@vueuse/core';
import 'element-plus/es/utils/index.mjs';
import 'element-plus/es/constants/index.mjs';
import { ElBadge } from 'element-plus/es/components/badge/index.mjs';
import 'element-plus/es/components/config-provider/index.mjs';
import { ElIcon } from 'element-plus/es/components/icon/index.mjs';
import { messageProps, messageEmits } from './message.mjs';
import { getLastOffset, getOffsetOrSpace } from './instance.mjs';
import _export_sfc from 'element-plus/es/_virtual/plugin-vue_export-helper.mjs';
import { TypeComponents, TypeComponentsMap } from 'element-plus/es/utils/vue/icon.mjs';
import { useGlobalComponentSettings } from 'element-plus/es/components/config-provider/src/hooks/use-global-config.mjs';
import { EVENT_CODE } from 'element-plus/es/constants/aria.mjs';

const _hoisted_1 = ["id"];
const _hoisted_2 = ["innerHTML"];
const __default__ = defineComponent({
    name: "ElMessage"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
    ...__default__,
    props: messageProps,
    emits: messageEmits,
    setup(__props, { expose }) {
        const props = __props;
        const { Close } = TypeComponents;
        const { ns, zIndex } = useGlobalComponentSettings("message");
        const { currentZIndex, nextZIndex } = zIndex;
        const messageRef = ref();
        const visible = ref(false);
        const height = ref(0);
        let stopTimer = void 0;
        const badgeType = computed(() => props.type ? props.type === "error" ? "danger" : props.type : "info");
        const typeClass = computed(() => {
            const type = props.type;
            return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
        });
        const iconComponent = computed(() => props.icon || TypeComponentsMap[props.type] || "");
        const lastOffset = computed(() => getLastOffset(props.id));
        const offset = computed(() => getOffsetOrSpace(props.id, props.offset) + lastOffset.value);
        const bottom = computed(() => height.value + offset.value);
        const customStyle = computed(() => ({
            top: `${offset.value}px`,
            zIndex: currentZIndex.value
        }));
        function startTimer() {
            if (props.duration === 0)
                return;
            ({ stop: stopTimer } = useTimeoutFn(() => {
                close();
            }, props.duration));
        }
        function clearTimer() {
            stopTimer == null ? void 0 : stopTimer();
        }
        function close() {
            visible.value = false;
        }
        function keydown({ code }) {
            if (code === EVENT_CODE.esc) {
                close();
            }
        }
        onMounted(() => {
            startTimer();
            nextZIndex();
            visible.value = true;
        });
        watch(() => props.repeatNum, () => {
            clearTimer();
            startTimer();
        });
        useEventListener(document, "keydown", keydown);
        useResizeObserver(messageRef, () => {
            height.value = messageRef.value.getBoundingClientRect().height;
        });
        expose({
            visible,
            bottom,
            close
        });
        return (_ctx, _cache) => {
            return openBlock(), createBlock(Transition, {
                name: unref(ns).b("fade"),
                onBeforeLeave: _ctx.onClose,
                onAfterLeave: _cache[0] || (_cache[0] = () => _ctx.$emit("destroy")),
                persisted: ""
            }, {
                default: withCtx(() => [
                    withDirectives(createElementVNode("div", {
                        id: _ctx.id,
                        ref_key: "messageRef",
                        ref: messageRef,
                        class: normalizeClass([
                            unref(ns).b(),
                            { [unref(ns).m(_ctx.type)]: _ctx.type },
                            unref(ns).is("center", _ctx.center),
                            unref(ns).is("closable", _ctx.showClose),
                            unref(ns).is("plain", _ctx.plain),
                            _ctx.customClass
                        ]),
                        style: normalizeStyle(unref(customStyle)),
                        role: "alert",
                        onMouseenter: clearTimer,
                        onMouseleave: startTimer,
                        onClick: props.onClick
                    }, [
                        _ctx.repeatNum > 1 ? (openBlock(), createBlock(unref(ElBadge), {
                            key: 0,
                            value: _ctx.repeatNum,
                            type: unref(badgeType),
                            class: normalizeClass(unref(ns).e("badge"))
                        }, null, 8, ["value", "type", "class"])) : createCommentVNode("v-if", true),
                        unref(iconComponent) ? (openBlock(), createBlock(unref(ElIcon), {
                            key: 1,
                            class: normalizeClass([unref(ns).e("icon"), unref(typeClass)])
                        }, {
                            default: withCtx(() => [
                                (openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent))))
                            ]),
                            _: 1
                        }, 8, ["class"])) : createCommentVNode("v-if", true),
                        renderSlot(_ctx.$slots, "default", {}, () => [
                            !_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", {
                                key: 0,
                                class: normalizeClass(unref(ns).e("content"))
                            }, toDisplayString(_ctx.message), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
                                createElementVNode("p", {
                                    class: normalizeClass(unref(ns).e("content")),
                                    innerHTML: _ctx.message
                                }, null, 10, _hoisted_2)
                            ], 2112))
                        ]),
                        _ctx.showClose ? (openBlock(), createBlock(unref(ElIcon), {
                            key: 2,
                            class: normalizeClass(unref(ns).e("closeBtn")),
                            onClick: withModifiers(close, ["stop"])
                        }, {
                            default: withCtx(() => [
                                createVNode(unref(Close))
                            ]),
                            _: 1
                        }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true)
                    ], 46, _hoisted_1), [
                        [vShow, visible.value]
                    ])
                ]),
                _: 3
            }, 8, ["name", "onBeforeLeave"]);
        };
    }
});
var MessageConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "message.vue"]]);

export { MessageConstructor as default };
